<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>grid</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="../resources/css/gridrecruit.css"/>
	
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/BaseExtend.js"></script>	
	
	<style>
        <!--
        .new-tab {
		    background-image:url(tabs.gif ) !important;
		}
        body{
        	width: 100%;
        	height: 100%
        }
        .gridPanel1{
        	float:left;
        	width:100%; 
        	height:100%;
        }
        .gridPanel2{
        	float:left; 
        	width:100%; 
        	height:100%;
        }
        .rightArrow{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -120px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .rightArrowAll{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -165px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .leftArrow{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -105px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .leftArrowAll{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -180px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .centerDiv{
        	width:10%;
        	text-align: center;
        	float: left;
        }
        //-->
        </style>
        <script type="text/javascript">
Ext.onReady(function(){

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy([
            ['01','name01','descn01'],
            ['02','name02','descn02'],
            ['03','name03','descn03'],
            ['04','name04','descn04'],
            ['05','name05','descn05']
        ]),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    var ds2 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    ds1.load();
    ds2.load();

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var grid1 = new Ext.grid.GridPanel({
    	width:Ext.get('gridPanel1').getWidth(),
        el: 'gridPanel1',
        layout:'anchor',
        height:Ext.get('gridPanel1').getHeight(),
        ds: ds1,
        cm: cm,
        viewConfig:{
			autoFill:true,
			deferEmptyText:'请等待...',
			emptyText:'没有数据',
			enableRowBody:true
		},
        enableDragDrop: true
    });
    var grid2 = new Ext.grid.GridPanel({
        el: 'gridPanel2',
        layout:'anchor',
        width:Ext.get('gridPanel2').getWidth(),
        height:Ext.get('gridPanel2').getHeight(),
        ds: ds2,
        cm: cm,
        viewConfig:{
			autoFill:true,
			deferEmptyText:'请等待...',
			emptyText:'没有数据',
			enableRowBody:true
		},
        enableDragDrop: true
    });

    grid1.render();
    grid2.render();

    var ddrow1 = new Ext.dd.DropTarget(grid1.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds2.remove(rowData);
                ds1.insert(index, rowData);
            }
        }
    });

    var ddrow2 = new Ext.dd.DropTarget(grid2.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds1.remove(rowData);
                ds2.insert(index, rowData);
            }
        }
    });
	new Ext.Button({
		el:'rightArrow',
        iconCls:'rightArrow',
        minWidth:20,
        handler: function(){
        	//判断是否又选择，如果没有，则选择第一行
        	if(!grid1.getSelectionModel().hasSelection()){
        		grid1.getSelectionModel().selectFirstRow();
        		
        	}
        	var rows = grid1.getSelections();
        	for(i = 0; i < rows.length; i++) {
	            var rowData = rows[i];
	            if(!this.copy) ds1.remove(rowData);
	            ds2.add(rowData);
	        }
        }
    }).render();
    new Ext.Button({
		el:'rightArrowAll',
        iconCls:'rightArrowAll',
        minWidth:20,
        handler: function(){
			//选择所有项
        	grid1.getSelectionModel().selectAll();
        	var rows = grid1.getSelections();
        	for(i = 0; i < rows.length; i++) {
	            var rowData = rows[i];
	            if(!this.copy) ds1.remove(rowData);
	            ds2.add(rowData);
	        }
        }
    }).render();
    new Ext.Button({
		el:'leftArrow',
		iconCls:'leftArrow',
		minWidth:20,
        handler: function(){
        	
        	//判断是否又选择，如果没有，则选择第一行
        	if(!grid2.getSelectionModel().hasSelection()){
        		grid2.getSelectionModel().selectFirstRow();
        		
        	}
        	
        	var rows = grid2.getSelections();
        	for(i = 0; i < rows.length; i++) {
	            var rowData = rows[i];
	            if(!this.copy) ds2.remove(rowData);
	            ds1.add(rowData);
	        }
        }
    }).render();   
    new Ext.Button({
		el:'leftArrowAll',
		iconCls:'leftArrowAll',
		minWidth:20,
        handler: function(){
        	
        	//选择所有项
        	
        	grid2.getSelectionModel().selectAll();
        	
        	var rows = grid2.getSelections();
        	for(i = 0; i < rows.length; i++) {
	            var rowData = rows[i];
	            if(!this.copy) ds2.remove(rowData);
	            ds1.add(rowData);
	        }
        }
    }).render(); 
    
    //debugger;

    var target1=new Ext.dd.DDTarget(grid1.view.mainBody,{
    	ddGroup:'GridDD1',
    	copy:false,
    	notifyDrop:function(dd,e,data){
    		//获得grid选中的多少行的数据 
    		var rows=data.selections;
    		//获得与拖动的关联数据 （要drop的位置）
    		var index=dd.getDragData(e).rowIndex;
    		if(typeof(index)=='undefined'){
    			return;
    		}
    		for(var i=0;i<rows.length;i++){
    			var rowData=rows[i];
    			if(!this.copy) ds1.remove(rowData);
    			ds1.insert(index,rowData);
    		}
    		grid1.view.refresh();
    	}
    });
    var target2=new Ext.dd.DDTarget(grid2.view.mainBody,{
    	ddGroup:'GridDD2',
    	copy:false,
    	notifyDrop:function(dd,e,data){
    		//获得grid选中的多少行的数据 
    		var rows=data.selections;
    		//获得与拖动的关联数据 （要drop的位置）
    		var index=dd.getDragData(e).rowIndex;
    		if(typeof(index)=='undefined'){
    			return;
    		}
    		for(var i=0;i<rows.length;i++){
    			var rowData=rows[i];
    			if(!this.copy) ds2.remove(rowData);
    			ds2.insert(index,rowData);
    		}
    		grid2.view.refresh();
    	}
    });

});
        </script>
    </head>
    <body>
    	<table width=100% height=100% border="0" cellpadding="0" cellspacing="0">
    		<tr>
    			<td width=45% height=100%>
	    			<div id="gridPanel1Div" class="gridPanel1">
			        	<div id="gridPanel1" style="width:100%;height:100%">
			        	</div>
			        </div>
    			</td>
    			<td width=10% height=100%>
	    			<table align="center" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
		            	<tr>
		                	<td align="center">
		                		<table align="center" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
		                			<tr>
		                				<td align="center">
					                		<div id="rightArrow">                     
					                   		</div>
		                				</td>
		                			</tr>
		                			<tr>
		                				<td align="center">
		                					<div id="rightArrowAll">                     
					                   		</div>
		                				</td>
		                			</tr>
		                			<tr>
		                				<td>
		                					&nbsp;
		                				</td>
		                			</tr>
		                		</table>	                        
		                    </td>
		                </tr>
		                <tr>
		                	<td align="center">
		                		<table align="center" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
		                			<tr>
		                				<td align="center">
					                		<div id="leftArrow">                     
					                        </div>
		                				</td>
		                			</tr>
		                			<tr>
		                				<td align="center">
		                					<div id="leftArrowAll">                     
					                        </div>
		                				</td>
		                			</tr>
		                			<tr>
		                				<td>
		                					&nbsp;
		                				</td>
		                			</tr>
		                		</table>
		                    	
		                    </td>
		                </tr>
		            </table>   	
    			</td>
    			<td width="45%" height=100%>
	    			<div id="gridPanel2Div" class="gridPanel2">
			        	<div id="gridPanel2"  style="width:100%;height:100%">
			        	</div>
			        </div>
    			</td>
    		</tr>
    	</table>
    </body>
</html>